<template>
  <div class="article-region">
    <!-- 轮播图 -->
    <div class="rotation-img animate__animated animate__zoomInUp">
      <div class="lunbo">
        <Rotation></Rotation>
      </div>
    </div>
    <div style="width: 1500px; margin: 0 auto">
      <!-- 上面导航 -->
      <div class="navication">
        <Navication></Navication>
      </div>
      <!-- 下面内容 -->
      <div>
        <!-- 左边大框 -->
        <div class="left-article">
          <!--  -->
          <!-- 文章内容区域 -->
          <div class="articles">
            <div v-show="article == ''" style="background:#FFF;    margin-top: 25px;
    border-radius: 10px;">
               <el-empty description="未查询到内容"></el-empty>
            </div>
           
            <div v-show="article!=''" style="margin-top: 2px;">
              <div class="abs ">
              <div class="animate__animated animate__bounce"   v-for="(item, index) in article"
                :key="index">
                  <ArticleContent
                class=""
              
                :article="item"
              ></ArticleContent>
              </div>
            
            </div>
            <div class="loader">
              <h4 v-show="!isInfo" style="color: #2882c5">加载完了~~</h4>
              <el-button
                v-show="isInfo"
                @click="loader"
                type="primary"
                style="width: 100%"
                :loading="isLoader"
                >{{ message }}</el-button
              >
            </div>
            </div>
          </div>
        </div>
        <!-- 右边大框 -->
        <div class="right-daInfo">
          <!-- 天气 -->
          <div class="right-weacher">
            <Weather></Weather>
          </div>
          <!-- 排行榜 -->
          <div class="rank">
            <Rank></Rank>
          </div>
          <!-- 下面3d标签 -->
          <div class="tagcloud">
            <Tagcloud></Tagcloud>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleContent from "../article/articleContent.vue";
import Weather from "../weacher/weacher.vue";
import Navication from "../article/navication.vue";
import Tagcloud from "../tagcloud/tagcloud.vue";
import Rank from "../ranking/ranking.vue";
import axios from "axios";
import Rotation from "@/components/rotation/rotation.vue";
import PubSub from 'pubsub-js';
export default {
  name: "Articlejiegou",
  components: {
    ArticleContent,
    Weather,
    Navication,
    Tagcloud,
    Rank,
    Rotation,
  },
  data() {
    return {
      message: "加载资源",
      isLoader: false,
      isInfo: true, //是否加载玩数据
      articleData: {},
      article: [],
    };
  },
  mounted() {
    //获取新数据
    this.getNewArticle("articles")
    //订阅信息
    this.getpubSubs()
    //发布信息到app显示主页
    PubSub.publish("toBlogPage")
  },

  methods: {
    getNewArticle(url){
       //拿到文章的数据
    const that = this;
    axios
      .post("/aabbcc/article/"+url)
      .then(function (response) {
        if(response.data.code == 200){
          if(response.data.obj ==null || response.data.obj == "" || response.data.obj == "null" || typeof response.data.obj == "undefined"){
             that.article = [];
             that.articleData = ""
          }else{
              that.articleData = response.data.obj;
                if(that.articleData.length <=2){
                    that.article = that.articleData
                }else{
                  that.article = that.articleData.slice(0, 2);
                }
          }
              

        }else{
          console.log("数据异常");
        }
        
       
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    loader() {
      this.isLoader = true;
      this.message = "加载中";
      setTimeout(() => {
        this.isLoader = false;
        this.message = "加载资源";
        var leg = this.article.length + 2;
        for (var i = this.article.length; i < leg; i++) {
          if (this.articleData.length < i || this.articleData.length == this.article.length) {
            this.isInfo = false;
          } else {
            this.isInfo = true;
          }
          this.article.push(this.articleData[i]);
        }
      }, 2000);
    },
    getpubSubs(){
      PubSub.subscribe("articleInfos",(item,data)=>{
        //调用数据查询方法
        this.getNewArticle(data)
      })
    }
  },
};
</script>

<style scoped>
/* 轮播 */
.rotation-img {
  position: relative;
  top: -24px;
}
.rotation-img .lunbo {
  width: 100%;
}


.loader {
  width: 8%;
  height: 40px;
  margin: 0 auto;
  margin-top: 50px;
}
.article-region {
  width: 100%;
  position: relative;
      top: 100px;
}
.article-region::after {
  content: "";
  display: block;
  clear: both;
}
/* 上面导航 */
.navication {
  height: 50px;
  background-color: #fff;
  border-radius: 10px;
}

/* 左边 */
.article-region .left-article {
  width: 80%;
  float: left;
  margin-top: -10px;
  /* border: 1px solid red; */
}
.article-region .left-article .articles .abs{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.article-region .left-article .articles .abs>div{
  width: 49%;
}
/* 右边 */
.right-daInfo {
  width: 19%;
  /* border: 1px solid red; */
  float: right;
  /* position: fixed; */
}
/* 天气 */
.right-daInfo .right-weacher {
  background-color: #fff;
  width: 100%;
  border-radius: 10px;
  margin-top: 13px;
}
/* 3d标签 */
.right-daInfo .tagcloud {
  background-color: #fff;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  margin-top: 13px;
  background: #fff;
}
/* 排行榜 */
.right-daInfo .rank {
  background-color: #fff;
  width: 100%;
  border-radius: 10px;
  margin-top: 13px;
  background: #fff;
}
</style>